<template>
  <div>
    <a-row :gutter="10">
      <a-col :md="24" :sm="24">
        <a-card :bordered="false">
          <!-- 按钮操作区域 -->
          <a-row style="margin-left: 14px">
            <a-button @click="handleSelectGoods()" type="primary">选择商品</a-button>
            <a-button style="margin-left: 10px" v-print="printObj" type="primary" :disabled="data.length == 0">打印</a-button>
          </a-row>
          <div style="background: #fff;">
            <div id="printTest">
              <template v-for="(item, index) in data">
                <div style="height: 50mm;width: 50mm; display: flex;align-items: center; margin-bottom: 5mm;">
                  <div style="width: 30mm;height: 50mm; display: flex;align-items: center;justify-content: center;">
                    <canvas ref="barcodeList" :key="index"></canvas>
                  </div>
                  <div style="width: 70mm;height: 20mm; display: flex;align-items: center;justify-content: center; font-size: 16px;font-family: auto;color: #000000;word-break: break-all;padding: 10px;transform: rotate(90deg);font-weight: bold;">
                      {{ item.name }}
                  </div>
                  
                  <!-- <div style="display: inline-block; width: 150px;text-align: center;font-size: 16px;font-family: auto;color: #000000;word-break: break-all;padding: 10px;">
                      {{ item.mBarCode }}
                  </div> -->
                </div>
              </template>
            </div>
          </div>
        </a-card>
      </a-col>
    </a-row>
    <j-select-material-modal ref="selectModal" :multi="true" @ok="selectOK" @initComp="initComp"/>
  </div>
</template>
<script>
import JSelectMaterialModal from "@comp/jeecgbiz/modal/JSelectMaterialModal.vue";
import Print from 'vue-print-nb'
import Vue from 'vue'
import  QRcode from 'qrcode'

Vue.use(Print)

export default {
  name: "BarCodePrint",
  components: {
    JSelectMaterialModal,
  },
  data() {
    return {
      printObj: {
        id: 'printTest', // 绑定打印区域的id
        beforeOpenCallback(vue) {
          vue.printLoading = true
          console.log('打开之前')
        },
        openCallback(vue) {
          vue.printLoading = false
          console.log('执行了打印')
        },
        closeCallback(vue) {
          console.log('关闭了打印工具')
        }
      },
      names: "",
      data: [],
      options: {
        width: 50,
        height: 50,
        margin: 2,
        color: '#ff0000',
        background: '#ffffff',
        scale: 5,
        type: 'image/jpeg'
      }
    }
  },
  computed: {},
  methods: {
    handleSelectGoods() {
      this.$refs.selectModal.showModal()
    },
    initComp(name) {
      this.names = name ? name : undefined
    },
    selectOK(rows, idStr) {
      this.data = [...rows]
      for (let i = 0; i < this.data.length; i++) {
        this.$nextTick(() => {
          // JsBarcode(this.$refs.barcodeList[i], this.data[i].mBarCode, this.options)
          
          QRcode.toCanvas(this.$refs.barcodeList[i], this.data[i].mBarCode, this.options)
        })
      }
    }
  }
}
</script>
<style lang="less">
@media print {
  @page {
    size: auto; /* 重置页面大小，避免出现空白页 */
    margin-top: 0; /* 取消页眉 */
    margin-bottom: 0; /* 取消页脚 */
    margin-left: 0;
    margin-right: 0;  /* 取消默认的左右页边距 */
  }
}
</style>
